<template>
  <router-link 
    :to="item.link" 
    class="nav-menu-item"
    :class="{ 'active': isActive }"
    @click="handleClick"
  >
    <i :class="item.icon"></i>
    <span>{{ item.text }}</span>
  </router-link>
</template>

<script setup>
import { computed } from 'vue'
import { useMenuStore } from '../stores/useMenuStore'

const menuStore = useMenuStore()

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const isActive = computed(() => menuStore.activeItemId === props.item.id)

const handleClick = () => {
  menuStore.setActiveItem(props.item.id)
}
</script>

<style scoped>
.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
}

.nav-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.nav-menu-item.active {
  background: var(--primary-color);
  color: white;
}

.nav-menu-item i {
  font-size: 16px;
}
</style> 